<template>
  <div
    class="content"
    :style="{
      height: height,
      width: width,
    }"
  >
    <div id="huikuan-echarts" ref="echartsRef"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import "echarts";
const props = defineProps({
  width: {
    //列数据
    type: String,
    default: "930px",
  },
  height: {
    type: String,
    default: "492px",
  },
});

const myChart = ref();
const echartsRef = ref();
const bgColor = "#022B66";
const _pie = () => {
  let dataArr = [];
  for (var i = 0; i < 8; i++) {
    if (i % 2 === 0) {
      dataArr.push({
        name: (i + 1).toString(),
        value: 60,
        itemStyle: {
          color: "rgb(63,150,175)",
          borderWidth: 0,
          borderColor: bgColor,
        },
      });
    } else {
      dataArr.push({
        name: (i + 1).toString(),
        value: 10,
        itemStyle: {
          color: bgColor,
          borderWidth: 0,
          borderColor: bgColor,
        },
      });
    }
  }
  return dataArr;
};
const getEcharts = () => {
  myChart.value = echarts.init(echartsRef.value);
  option.value = {
    backgroundColor: bgColor,
    series: [
      {
        type: "pie",
        zlevel: 1, //所有图形的 zlevel 值。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
        startAngle: 90, //默认90，起始角度，支持范围[0, 360]
        radius: ["70%", "80%"], //数组的第一项是内半径，第二项是外半径 -- 圆环
        label: { show: false }, //文本标签，可用于说明图形的一些数据信息
        labelLine: { show: false }, //标签的视觉引导线配置
      },
      {
        type: "pie",
        zlevel: 2,
        silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
        startAngle: 360,
        radius: ["60%", "68%"],
        label: { show: false },
        labelLine: { show: false },
        data: _pie(),
        animation: false, //是否开启动画
      },
    ],
  };
};
const doing = () => {
  option.value.series[0].startAngle = option.value.series[0].startAngle - 5;
  option.value.series[1].startAngle = option.value.series[1].startAngle - 5;
  myChart.value.setOption(option.value);
};
const count = ref(0);
onMounted(() => {
  getEcharts();
  setInterval(() => {
    doing();
  }, 200);
});
</script>

<style scoped>
.content {
  position: relative;
  background-color: #022b66;
  box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  border: 1px solid rgba(19, 127, 212, 0.6);
}
#huikuan-echarts {
  width: 100%;
  height: 100%;
}
</style>
